<template>
  <div class="tools" v-if="isShowHome">
    <div class="toolHome">
      <div class="info">{{imageFactSize.width}} x {{imageFactSize.height}}</div>
    </div>
    <div class="toolHome">
      <div class="icon el-icon-download" title="保存图片" @click="saveImg"></div>
      <div class="icon el-icon-minus" title="缩小" @click="setScale(scale-scaleInterval)"></div>
      <div class="icon el-icon-refresh" title="原图大小" @click="setScale(100)"></div>
      <div class="icon el-icon-plus" title="放大" @click="setScale(scale+scaleInterval)"></div>
      <div class="info">{{scale}}%</div>
    </div>
    <div class="toolHome">
      <div class="icon el-icon-picture-outline" title="原图" @click="refImage"></div>
      <div class="icon el-icon-scissors" title="裁剪" @click="showCart"></div>
    </div>
    <!--裁剪确定-->
    <div class="toolHome center nobg" v-if="isShowCart">
      <div class="icon el-icon-check query" title="确定" @click="imageCartBtn(true)"></div>
      <div class="icon el-icon-close err" title="取消" @click="imageCartBtn(false)"></div>
    </div>
    <!-- 选取范围 -->
    <div class="toolHome">
      <div class="icon el-icon-full-screen" title="选取范围"></div>
      <div class="info f10" style="padding: 0;max-width: 60px;margin-right: 4px">10000,10000</div>
      <div class="info inputHome" style="padding: 0">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
      </div>
      <div class="icon el-icon-document-copy" title="复制"></div>
    </div>
  </div>
</template>

<script>
import {ipcRenderer} from "electron";

export default {
  name: "auImageTools",
  data(){
    return {
      scaleInterval:15,

    }
  },
  props:{
    isShowHome:{
      type:Boolean,
      default(){
        return false;
      }
    },
    imageFactSize:{
      width:0,
      height:0
    },
    imageBase64:{
      type:String,
      default(){
        return "";
      }
    },
    scale:{
      type:Number,
      default:100
    },
    data:{
      type:Object,
      default:null
    },
    isShowCart:{
      type:Boolean,
      default(){
        return false;
      }
    },
    cartSize:{
      width:0,
      height:0,
      top:0,
      left:0,
    },
    pageSize:{
      width:0,
      height:0,
      top:0,
      left:0,
    },
  },
  computed:{
    imageSize(){
      let size=this.imageFactSize;
      return {
        width:size.width*this.scale/100,
        height:size.height*this.scale/100,
      }
    },
  },
  methods:{
    saveImg(){
      ipcRenderer.invoke("image-save",this.imageBase64).then(res=>{
        if(res){
          this.$message.success("保存成功");
        }
      })
    },
    setScale(val){
      if(val<this.scaleInterval){
        val=this.scaleInterval;
      }
      this.$emit("update:scale",val)
      this.$parent.updaterPageInfo();
    },
    //恢复原图
    refImage(){
      this.$emit("update:imageBase64",this.data.image)

      this.$parent.getSize();
      this.$parent.initMonitor();
    },
    //裁剪
    showCart(){
      //设置宽高
      let width=this.imageSize.width;
      let height=this.imageSize.height;
      if(width>this.pageSize.width){
        width=this.pageSize.width;
      }
      if(height>this.pageSize.height){
        height=this.pageSize.height;
      }

      //获取滚动条宽度和高度
      let left=this.pageSize.left;
      let top=this.pageSize.top;

      //计算比例
      this.$emit("update:cartSize",{height,width,left,top})
      this.$emit("update:isShowCart",true)
    },
    //裁剪确定取消按钮
    imageCartBtn(isQuery=false){
      if(this.$parent.$refs.imageCart){
        if(isQuery)
          this.$parent.$refs.imageCart.btnQuery();
        else
          this.$parent.$refs.imageCart.closeCart();
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/auImage";
</style>
